<template>
  <div style="background:white;padding:10px">
    <!-- 
            留言显示还是隐藏
            留言删除
         -->
    <div class="message-manage-box">
      <el-table
        :data="remarks"
        style="width: 100%;margin-bottom: 20px;"
        row-key="rmkId"
        :default-expand-all="false"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.replys" :show-header="false">
              <el-table-column prop="rpyTime"> </el-table-column>
              <el-table-column prop="rpyUser"> </el-table-column>
              <el-table-column prop="rpyContent"> </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button size="mini" @click="removeReply(scope.row.rpyId)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="rmkTime" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="rmkUser" label="用户" width="180">
        </el-table-column>
        <el-table-column prop="rmkContent" label="内容"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="removeRemark(scope.row.rmkId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.messages-box {
  width: 1050px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
}
</style>


<script>
export default {
  name: "MMessage",
  data() {
    return {
      remarks: [
        {
          rmkId: "1",
          rmkTime: "sss",
          rmkUser: "Sam",
          rmkContent: "bbb",
          replys: [
            {
              rpyId: "1",
              rpyTime: "2020-11-07 15:31",
              rpyUser: "Constance",
              rpyContent: "aaa"
            },
            {
              rpyId: "2",
              rpyTime: "2020-11-07 15:32",
              rpyUser: "Mike",
              rpyContent: "bbb"
            }
          ]
        },
        {
          rmkId: "2",
          rmkTime: "sss",
          rmkUser: "Sam",
          rmkContent: "bbb",
          replys: [
            {
              rpyId: "3",
              rpyTime: "2020-11-07 15:31",
              rpyUser: "Constance",
              rpyContent: "aaa"
            },
            {
              rpyId: "4",
              rpyTime: "2020-11-07 15:32",
              rpyUser: "Mike",
              rpyContent: "bbb"
            }
          ]
        }
      ]
    };
  },
  created: function() {
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/remarkAndReply",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 0
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        that.remarks = res.data.remarks;
      },
      function(res) {
        console.log(res);
        console.log("啊呀，Messages-showMessages出错啦");
      }
    );
  },
  methods: {
    removeRemark(rmkId) {
      console.log("remove remarkId:" + rmkId);
      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/remarkAndReply",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: 3,
          rmkId:rmkId
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          that.remarks = res.data.remarks;
        },
        function(res) {
          console.log(res);
          console.log("啊呀，remove remark出错啦");
        }
      );
    },
    removeReply(rpyId) {
      console.log("remove replyId:" + rpyId);
      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/remarkAndReply",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: 4,
          rpyId:rpyId
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          that.remarks = res.data.remarks;
        },
        function(res) {
          console.log(res);
          console.log("啊呀，remove reply出错啦");
        }
      );
    }
  }
};
</script>